μ λ ν° ν¨ν΄μ μ¬μ©νμ¬ React Context μ±λ₯μ μ΅μ ννμΈμ. μ€μ μμ λ° λͺ¨λ² μ¬λ‘λ₯Ό ν΅ν΄ 리λ λλ§ λ° μ ν리μΌμ΄μ ν¨μ¨μ±μ κ°μ ν©λλ€.
React Context μ΅μ ν: μ λ ν° ν¨ν΄ λ° μ±λ₯
React Contextλ μ ν리μΌμ΄μ μνλ₯Ό κ΄λ¦¬νκ³ prop drilling μμ΄ μ»΄ν¬λνΈ κ°μ 곡μ ν μ μλ κ°λ ₯ν λ©μ»€λμ¦μ μ 곡ν©λλ€. κ·Έλ¬λ Contextλ₯Ό λ¨μνκ² κ΅¬ννλ©΄ νΉν ν¬κ³ 볡μ‘ν μ ν리μΌμ΄μ μμ μ±λ₯ λ³λͺ© νμμ΄ λ°μν μ μμ΅λλ€. Context κ°μ΄ λ³κ²½λ λλ§λ€ ν΄λΉ Contextλ₯Ό μ¬μ©νλ λͺ¨λ μ»΄ν¬λνΈκ° λ°μ΄ν°μ μμ λΆλΆμλ§ μμ‘΄νλλΌλ 리λ λλ§λ©λλ€.
μ΄ κΈ°μ¬μμλ React Context μ±λ₯μ μ΅μ ννκΈ° μν μ λ΅μΌλ‘ μ λ ν° ν¨ν΄μ μμΈν μ΄ν΄λ΄ λλ€. μλ λ°©μ, μ΄μ , μ¬μ©λ²μ μ€λͺ νλ μ€μ μμ λ₯Ό μ 곡ν©λλ€. λν κ΄λ ¨ μ±λ₯ κ³ λ € μ¬ν λ° λ체 μ΅μ ν κΈ°μ μ λν΄μλ λ Όμν©λλ€.
μ΄ν΄ν΄μΌ ν λ¬Έμ : λΆνμν 리λ λλ§
ν΅μ¬ λ¬Έμ λ Reactμ Context APIκ° κΈ°λ³Έμ μΌλ‘ Context κ°μ΄ λ³κ²½λ λλ§λ€ μ¬μ©νλ λͺ¨λ μ»΄ν¬λνΈμ 리λ λλ§μ νΈλ¦¬κ±°νλ€λ μ¬μ€μμ λ°μν©λλ€. Contextκ° μ¬μ©μ νλ‘ν λ°μ΄ν°, ν λ§ μ€μ λ° μ ν리μΌμ΄μ ꡬμ±μ΄ ν¬ν¨λ ν° κ°μ²΄λ₯Ό 보μ νλ μλ리μ€λ₯Ό κ³ λ €ν΄ λ³΄μΈμ. μ¬μ©μ νλ‘ν λ΄μμ λ¨μΌ μμ±μ μ λ°μ΄νΈνλ©΄ ν λ§ μ€μ μλ§ μμ‘΄νλλΌλ Contextλ₯Ό μ¬μ©νλ λͺ¨λ μ»΄ν¬λνΈκ° 리λ λλ§λ©λλ€.
μ΄λ νΉν 볡μ‘ν μ»΄ν¬λνΈ κ³μΈ΅ ꡬ쑰μ λΉλ²ν Context μ λ°μ΄νΈλ₯Ό μ²λ¦¬ν λ μλΉν μ±λ₯ μ νλ‘ μ΄μ΄μ§ μ μμ΅λλ€. λΆνμν 리λ λλ§μ κ·μ€ν CPU μ¬μ΄ν΄μ λλΉνκ³ μ¬μ©μ μΈν°νμ΄μ€λ₯Ό λλ¦¬κ² λ§λ€ μ μμ΅λλ€.
μ λ ν° ν¨ν΄: λμ μ λ°μ΄νΈ
μ λ ν° ν¨ν΄μ μ»΄ν¬λνΈκ° νμν Context κ°μ νΉμ λΆλΆλ§ ꡬλ ν μ μλλ‘ νμ¬ μ루μ μ μ 곡ν©λλ€. μ 체 Contextλ₯Ό μ¬μ©νλ λμ μ»΄ν¬λνΈλ μ λ ν° ν¨μλ₯Ό μ¬μ©νμ¬ κ΄λ ¨ λ°μ΄ν°λ₯Ό μΆμΆν©λλ€. μ΄λ κ² νλ©΄ 리λ λλ§ λ²μκ° μ€μ΄λ€μ΄ μ€μ λ‘ λ³κ²½λ λ°μ΄ν°μ μμ‘΄νλ μ»΄ν¬λνΈλ§ μ λ°μ΄νΈλ©λλ€.
μλ λ°©μ:
- Context Provider: Context Providerλ μ ν리μΌμ΄μ μνλ₯Ό 보μ ν©λλ€.
- μ λ ν° ν¨μ: μ΄λ¬ν ν¨μλ Context κ°μ μ λ ₯μΌλ‘ λ°μ νμλ κ°μ λ°ννλ μμ ν¨μμ λλ€. Contextμμ νΉμ λ°μ΄ν° μ‘°κ°μ μΆμΆνλ νν° μν μ ν©λλ€.
- μ¬μ© μ»΄ν¬λνΈ: μ»΄ν¬λνΈλ μ¬μ©μ μ μ ν (μ’ μ’ `useContextSelector`λΌκ³ ν¨)μ μ¬μ©νμ¬ μ λ ν° ν¨μμ μΆλ ₯μ ꡬλ ν©λλ€. μ΄ ν μ μ νν λ°μ΄ν°μ λ³κ²½ μ¬νμ κ°μ§νκ³ νμν κ²½μ°μλ§ λ¦¬λ λλ§μ νΈλ¦¬κ±°νλ μν μ ν©λλ€.
μ λ ν° ν¨ν΄ ꡬν
λ€μμ μ λ ν° ν¨ν΄ ꡬνμ 보μ¬μ£Όλ κΈ°λ³Έ μμ μ λλ€.
1. Context μμ±
λ¨Όμ Contextλ₯Ό μ μν©λλ€. μ¬μ©μ νλ‘νκ³Ό ν λ§ μ€μ μ κ΄λ¦¬νκΈ° μν Contextλ₯Ό μμν΄ λ³΄κ² μ΅λλ€.
import React, { createContext, useState, useContext } from 'react';
const AppContext = createContext({});
const AppProvider = ({ children }) => {
const [user, setUser] = useState({
name: 'John Doe',
email: 'john.doe@example.com',
location: 'New York'
});
const [theme, setTheme] = useState({
primaryColor: '#007bff',
secondaryColor: '#6c757d'
});
const updateUserName = (name) => {
setUser(prevUser => ({ ...prevUser, name }));
};
const updateThemeColor = (primaryColor) => {
setTheme(prevTheme => ({ ...prevTheme, primaryColor }));
};
const value = {
user,
theme,
updateUserName,
updateThemeColor
};
return (
{children}
);
};
export { AppContext, AppProvider };
2. μ λ ν° ν¨μ μμ±
λ€μμΌλ‘ Contextμμ μνλ λ°μ΄ν°λ₯Ό μΆμΆνλ μ λ ν° ν¨μλ₯Ό μ μν©λλ€. μλ₯Ό λ€λ©΄ λ€μκ³Ό κ°μ΅λλ€.
const selectUserName = (context) => context.user.name;
const selectPrimaryColor = (context) => context.theme.primaryColor;
3. μ¬μ©μ μ μ ν (`useContextSelector`) μμ±
μ΄κ²μ΄ μ λ ν° ν¨ν΄μ ν΅μ¬μ λλ€. `useContextSelector` ν μ μ λ ν° ν¨μλ₯Ό μ λ ₯μΌλ‘ λ°μ μ νν κ°μ λ°νν©λλ€. λν Contextμ λν ꡬλ μ κ΄λ¦¬νκ³ μ νν κ°μ΄ λ³κ²½λ λλ§ λ¦¬λ λλ§μ νΈλ¦¬κ±°ν©λλ€.
import { useContext, useState, useEffect, useRef } from 'react';
const useContextSelector = (context, selector) => {
const [selected, setSelected] = useState(() => selector(useContext(context)));
const latestSelector = useRef(selector);
const contextValue = useContext(context);
useEffect(() => {
latestSelector.current = selector;
});
useEffect(() => {
const nextSelected = latestSelector.current(contextValue);
if (!Object.is(selected, nextSelected)) {
setSelected(nextSelected);
}
}, [contextValue]);
return selected;
};
export default useContextSelector;
μ€λͺ :
- `useState`: μ λ ν°μμ λ°νλ μ΄κΈ° κ°μΌλ‘ `selected`λ₯Ό μ΄κΈ°νν©λλ€.
- `useRef`: μ΅μ `selector` ν¨μλ₯Ό μ μ₯νμ¬ μ»΄ν¬λνΈκ° 리λ λλ§λλλΌλ μ΅μ μ λ ν°λ₯Ό μ¬μ©νλλ‘ ν©λλ€.
- `useContext`: νμ¬ μ»¨ν μ€νΈ κ°μ κ°μ Έμ΅λλ€.
- `useEffect`: μ΄ ν¨κ³Όλ `contextValue`κ° λ³κ²½λ λλ§λ€ μ€νλ©λλ€. λ΄λΆμ μΌλ‘ `latestSelector`λ₯Ό μ¬μ©νμ¬ μ νν κ°μ λ€μ κ³μ°ν©λλ€. μ μ νν κ°μ΄ νμ¬ `selected` κ°κ³Ό λ€λ₯Έ κ²½μ°(κΉμ λΉκ΅λ₯Ό μν΄ `Object.is` μ¬μ©), `selected` μνκ° μ λ°μ΄νΈλμ΄ λ¦¬λ λλ§μ΄ νΈλ¦¬κ±°λ©λλ€.
4. μ»΄ν¬λνΈμμ Context μ¬μ©
μ΄μ μ»΄ν¬λνΈκ° `useContextSelector` ν μ μ¬μ©νμ¬ Contextμ νΉμ λΆλΆμ ꡬλ ν μ μμ΅λλ€.
import React from 'react';
import { AppContext, AppProvider } from './AppContext';
import useContextSelector from './useContextSelector';
const UserName = () => {
const userName = useContextSelector(AppContext, selectUserName);
return User Name: {userName}
;
};
const ThemeColorDisplay = () => {
const primaryColor = useContextSelector(AppContext, selectPrimaryColor);
return Theme Color: {primaryColor}
;
};
const App = () => {
return (
);
};
export default App;
μ΄ μμ μμ `UserName`μ μ¬μ©μ μ΄λ¦μ΄ λ³κ²½λ λλ§ λ¦¬λ λλ§λκ³ `ThemeColorDisplay`λ κΈ°λ³Έ μμμ΄ λ³κ²½λ λλ§ λ¦¬λ λλ§λ©λλ€. μ¬μ©μ μ΄λ©μΌμ΄λ μμΉλ₯Ό μμ ν΄λ `ThemeColorDisplay`κ° λ¦¬λ λλ§λμ§ μμΌλ©° κ·Έ λ°λλ λ§μ°¬κ°μ§μ λλ€.
μ λ ν° ν¨ν΄μ μ΄μ
- 리λ λλ§ κ°μ: μ£Όμ μ΄μ μ λΆνμν 리λ λλ§μ΄ ν¬κ² μ€μ΄λ€μ΄ μ±λ₯μ΄ ν₯μλλ€λ κ²μ λλ€.
- μ±λ₯ ν₯μ: 리λ λλ§μ μ΅μννμ¬ μ ν리μΌμ΄μ μ μλ΅μ±μ΄ ν₯μλκ³ ν¨μ¨μ±μ΄ λμμ§λλ€.
- μ½λ λͺ νμ±: μ λ ν° ν¨μλ μ»΄ν¬λνΈμ λ°μ΄ν° μ’ μμ±μ λͺ μμ μΌλ‘ μ μνμ¬ μ½λ λͺ νμ±κ³Ό μ μ§ κ΄λ¦¬μ±μ ν₯μμν΅λλ€.
- ν μ€νΈ μ©μ΄μ±: μ λ ν° ν¨μλ μμ ν¨μμ΄λ―λ‘ ν μ€νΈνκ³ μΆλ‘ νκΈ° μ½μ΅λλ€.
κ³ λ € μ¬ν λ° μ΅μ ν
1. λ©λͺ¨μ΄μ μ΄μ
λ©λͺ¨μ΄μ μ΄μ μ μ λ ν° ν¨μμ μ±λ₯μ λμ± ν₯μμν¬ μ μμ΅λλ€. μ λ ₯ Context κ°μ΄ λ³κ²½λμ§ μμ κ²½μ° μ λ ν° ν¨μλ μΊμλ κ²°κ³Όλ₯Ό λ°ννμ¬ λΆνμν κ³μ°μ λ°©μ§ν μ μμ΅λλ€. μ΄λ λΉμ©μ΄ λ§μ΄ λλ κ³μ°μ μννλ 볡μ‘ν μ λ ν° ν¨μμ νΉν μ μ©ν©λλ€.
`useMemo` ν μ `useContextSelector` ꡬν λ΄μμ μ¬μ©νμ¬ μ νν κ°μ λ©λͺ¨μ΄μ μ΄μ ν μ μμ΅λλ€. μ΄λ Context κ°μ΄ λ³κ²½λμμ§λ§ μ νν κ°μ΄ λμΌνκ² μ μ§λλλΌλ λΆνμν 리λ λλ§μ λ°©μ§νλ λ λ€λ₯Έ μ΅μ ν κ³μΈ΅μ μΆκ°ν©λλ€. λ€μμ λ©λͺ¨μ΄μ μ΄μ μ μ¬μ©νλλ‘ μ λ°μ΄νΈλ `useContextSelector`μ λλ€.
import { useContext, useState, useEffect, useRef, useMemo } from 'react';
const useContextSelector = (context, selector) => {
const latestSelector = useRef(selector);
const contextValue = useContext(context);
useEffect(() => {
latestSelector.current = selector;
}, [selector]);
const selected = useMemo(() => latestSelector.current(contextValue), [contextValue]);
return selected;
};
export default useContextSelector;
2. κ°μ²΄ λΆλ³μ±
μ λ ν° ν¨ν΄μ΄ μ¬λ°λ₯΄κ² μλνλ €λ©΄ Context κ°μ λΆλ³μ±μ 보μ₯νλ κ²μ΄ μ€μν©λλ€. Context κ°μ΄ μ§μ λ³κ²½λλ©΄ μ λ ν° ν¨μκ° λ³κ²½ μ¬νμ κ°μ§νμ§ λͺ»νμ¬ μλͺ»λ λ λλ§μ΄ λ°μν μ μμ΅λλ€. Context κ°μ μ λ°μ΄νΈν λλ νμ μ κ°μ²΄ λλ λ°°μ΄μ λ§λμΈμ.
3. κΉμ λΉκ΅
`useContextSelector` ν μ μ νν κ°μ λΉκ΅νκΈ° μν΄ `Object.is`λ₯Ό μ¬μ©ν©λλ€. μ΄κ²μ μμ λΉκ΅λ₯Ό μνν©λλ€. 볡μ‘ν κ°μ²΄μ κ²½μ° λ³κ²½ μ¬νμ μ ννκ² κ°μ§νλ €λ©΄ κΉμ λΉκ΅ ν¨μλ₯Ό μ¬μ©ν΄μΌ ν μ μμ΅λλ€. κ·Έλ¬λ κΉμ λΉκ΅λ κ³μ° λΉμ©μ΄ λ§μ΄ λ€ μ μμΌλ―λ‘ μ μ€νκ² μ¬μ©νμΈμ.
4. `Object.is`μ λν λμ
`Object.is`κ° μΆ©λΆνμ§ μμ κ²½μ°(μ: 컨ν μ€νΈμ κΉμ΄ μ€μ²©λ κ°μ²΄κ° μλ κ²½μ°) λμμ κ³ λ €νμΈμ. `lodash`μ κ°μ λΌμ΄λΈλ¬λ¦¬λ κΉμ λΉκ΅λ₯Ό μν΄ `_.isEqual`μ μ 곡νμ§λ§ μ±λ₯μ λ―ΈμΉλ μν₯μ μΌλμ λμΈμ. κ²½μ°μ λ°λΌ λ³κ²½ λΆκ°λ₯ν λ°μ΄ν° ꡬ쑰(Immerμ κ°μ)λ₯Ό μ¬μ©νλ ꡬ쑰μ 곡μ κΈ°μ μ΄ μ μ©ν μ μμ΅λλ€. μ΄λ¬ν κΈ°μ μ μ¬μ©νλ©΄ μλ³Έμ λ³κ²½νμ§ μκ³ λ μ€μ²©λ κ°μ²΄λ₯Ό μμ ν μ μμΌλ©°, `Object.is`λ‘ λΉκ΅ν μ μλ κ²½μ°κ° λ§μ΅λλ€.
5. μ λ ν°μ λν `useCallback`
`selector` ν¨μ μμ²΄κ° μ¬λ°λ₯΄κ² λ©λͺ¨μ΄μ μ΄μ λμ§ μμΌλ©΄ λΆνμν 리λ λλ§μ μμΈμ΄ λ μ μμ΅λλ€. `selector` ν¨μλ₯Ό `useCallback`μ μ λ¬νμ¬ μ’ μμ±μ΄ λ³κ²½λ λλ§ λ€μ μμ±λλλ‘ νμΈμ. μ΄λ κ² νλ©΄ μ¬μ©μ μ μ ν μ λν λΆνμν μ λ°μ΄νΈλ₯Ό λ°©μ§ν μ μμ΅λλ€.
const UserName = () => {
const userName = useContextSelector(AppContext, useCallback(selectUserName, []));
return User Name: {userName}
;
};
6. `use-context-selector`μ κ°μ λΌμ΄λΈλ¬λ¦¬ μ¬μ©
`use-context-selector`μ κ°μ λΌμ΄λΈλ¬λ¦¬λ μ±λ₯μ μ΅μ νλκ³ μμ λΉκ΅μ κ°μ κΈ°λ₯μ΄ ν¬ν¨λ 미리 λΉλλ `useContextSelector` ν μ μ 곡ν©λλ€. μ΄λ¬ν λΌμ΄λΈλ¬λ¦¬λ₯Ό μ¬μ©νλ©΄ μ½λλ₯Ό λ¨μννκ³ μ€λ₯κ° λ°μν μνμ μ€μΌ μ μμ΅λλ€.
import { useContextSelector } from 'use-context-selector';
import { AppContext } from './AppContext';
const UserName = () => {
const userName = useContextSelector(AppContext, selectUserName);
return User Name: {userName}
;
};
κΈλ‘λ² μμ λ° λͺ¨λ² μ¬λ‘
μ λ ν° ν¨ν΄μ κΈλ‘λ² μ ν리μΌμ΄μ μ λ€μν μ¬μ© μ¬λ‘μ μ μ©ν μ μμ΅λλ€.
- μ§μν: μ¬λ¬ μΈμ΄λ₯Ό μ§μνλ μ μ μκ±°λ νλ«νΌμ μμν΄ λ³΄μΈμ. Contextλ νμ¬ λ‘μΊκ³Ό λ²μμ 보μ ν μ μμ΅λλ€. ν μ€νΈλ₯Ό νμνλ μ»΄ν¬λνΈλ μ λ ν°λ₯Ό μ¬μ©νμ¬ νμ¬ λ‘μΊμ λν κ΄λ ¨ λ²μμ μΆμΆν μ μμ΅λλ€.
- ν λ§ κ΄λ¦¬: μμ λ―Έλμ΄ μ ν리μΌμ΄μ μ ν΅ν΄ μ¬μ©μκ° ν λ§λ₯Ό μ¬μ©μ μ μν μ μμ΅λλ€. Contextλ ν λ§ μ€μ μ μ μ₯ν μ μμΌλ©°, UI μμλ₯Ό νμνλ μ»΄ν¬λνΈλ μ λ ν°λ₯Ό μ¬μ©νμ¬ κ΄λ ¨ ν λ§ μμ±(μ: μμ, κΈκΌ΄)μ μΆμΆν μ μμ΅λλ€.
- μΈμ¦: κΈλ‘λ² μν°νλΌμ΄μ¦ μ ν리μΌμ΄μ μ Contextλ₯Ό μ¬μ©νμ¬ μ¬μ©μ μΈμ¦ μν λ° κΆνμ κ΄λ¦¬ν μ μμ΅λλ€. μ»΄ν¬λνΈλ μ λ ν°λ₯Ό μ¬μ©νμ¬ νμ¬ μ¬μ©μμκ² νΉμ κΈ°λ₯μ λν μ‘μΈμ€ κΆνμ΄ μλμ§ μ¬λΆλ₯Ό νμΈν μ μμ΅λλ€.
- λ°μ΄ν° κ°μ Έμ€κΈ° μν: λ§μ μ ν리μΌμ΄μ μ΄ λ‘λ© μνλ₯Ό νμν©λλ€. 컨ν μ€νΈλ API νΈμΆμ μνλ₯Ό κ΄λ¦¬ν μ μμΌλ©°, μ»΄ν¬λνΈλ νΉμ μλν¬μΈνΈμ λ‘λ© μνλ₯Ό μ νμ μΌλ‘ ꡬλ ν μ μμ΅λλ€. μλ₯Ό λ€μ΄ μ¬μ©μ νλ‘νμ νμνλ μ»΄ν¬λνΈλ `GET /user/:id` μλν¬μΈνΈμ λ‘λ© μνλ§ κ΅¬λ ν μ μμ΅λλ€.
λ체 μ΅μ ν κΈ°μ
μ λ ν° ν¨ν΄μ κ°λ ₯ν μ΅μ ν κΈ°μ μ΄μ§λ§ μ¬μ©ν μ μλ μ μΌν λꡬλ μλλλ€. λ€μ λμμ κ³ λ €ν΄ λ³΄μΈμ.
- `React.memo`: propsκ° λ³κ²½λμ§ μμ κ²½μ° λ¦¬λ λλ§μ λ°©μ§νκΈ° μν΄ ν¨μν μ»΄ν¬λνΈλ₯Ό `React.memo`λ‘ λνν©λλ€. μ΄λ propsλ₯Ό μ§μ λ°λ μ»΄ν¬λνΈλ₯Ό μ΅μ ννλ λ° μ μ©ν©λλ€.
- `PureComponent`: ν΄λμ€ μ»΄ν¬λνΈμ `PureComponent`λ₯Ό μ¬μ©νμ¬ λ¦¬λ λλ§νκΈ° μ μ props λ° μνμ μμ λΉκ΅λ₯Ό μνν©λλ€.
- μ½λ λΆν : μ ν리μΌμ΄μ μ μμ² μ λ‘λν μ μλ λ μμ μ²ν¬λ‘ λλλλ€. μ΄λ κ² νλ©΄ μ΄κΈ° λ‘λ μκ°μ΄ μ€μ΄λ€κ³ μ 체 μ±λ₯μ΄ ν₯μλ©λλ€.
- κ°μν: λλμ λ°μ΄ν° λͺ©λ‘μ νμνλ €λ©΄ κ°μν κΈ°μ μ μ¬μ©νμ¬ λ³΄μ΄λ νλͺ©λ§ λ λλ§ν©λλ€. μ΄λ κ² νλ©΄ λλμ λ°μ΄ν° μΈνΈλ₯Ό μ²λ¦¬ν λ μ±λ₯μ΄ ν¬κ² ν₯μλ©λλ€.
κ²°λ‘
μ λ ν° ν¨ν΄μ λΆνμν 리λ λλ§μ μ΅μννμ¬ React Context μ±λ₯μ μ΅μ ννλ λ° μ μ©ν κΈ°μ μ λλ€. μ»΄ν¬λνΈκ° νμν Context κ°μ νΉμ λΆλΆλ§ ꡬλ ν μ μλλ‘ νμ¬ μ ν리μΌμ΄μ μλ΅μ± λ° ν¨μ¨μ±μ ν₯μμν΅λλ€. λ©λͺ¨μ΄μ μ΄μ λ° μ½λ λΆν κ³Ό κ°μ λ€λ₯Έ μ΅μ ν κΈ°μ κ³Ό κ²°ν©νμ¬ μνν μ¬μ©μ κ²½νμ μ 곡νλ κ³ μ±λ₯ React μ ν리μΌμ΄μ μ ꡬμΆν μ μμ΅λλ€. μ ν리μΌμ΄μ μ νΉμ μꡬ μ¬νμ λ°λΌ μ¬λ°λ₯Έ μ΅μ ν μ λ΅μ μ ννκ³ κ΄λ ¨λ μ₯λ¨μ μ μ μ€νκ² κ³ λ €ν΄μΌ ν©λλ€.
μ΄ κΈ°μ¬μμλ ꡬν, μ΄μ λ° κ³ λ € μ¬νμ ν¬ν¨νμ¬ μ λ ν° ν¨ν΄μ λν ν¬κ΄μ μΈ κ°μ΄λλ₯Ό μ 곡νμ΅λλ€. μ΄ κΈ°μ¬μ μ€λͺ λ λͺ¨λ² μ¬λ‘λ₯Ό λ°λ₯΄λ©΄ React Context μ¬μ©μ ν¨κ³Όμ μΌλ‘ μ΅μ ννκ³ κΈλ‘λ² μ¬μ©μλ₯Ό μν κ³ μ±λ₯ μ ν리μΌμ΄μ μ ꡬμΆν μ μμ΅λλ€.